<template>
  <div>
    <header>
      <svg class="icon" aria-hidden="true" @click="backMeun">
        <use xlink:href="#icon-caidan"></use>
      </svg>
      <h3>Giraffe</h3>
      <svg class="icon" aria-hidden="true" @click="goSurvey">
        <use xlink:href="#icon-bianji"></use>
      </svg>
    </header>
    <v-touch tag="div" class="cards" v-on:swipeleft="swipeLeft"
    v-on:swiperight="swipeRight">
      <transition-group name="list-complete" tag="div" id="cards"
      class="wrapper">
        <section v-for="(value, index) in myCreateSurveyList" :key="index" class="card">
          <div v-if="value.status === 0" class="flex-col fix"
          :style="[value.imgUrl !== '' ? {backgroundImage: value.url} : {backgroundColor: 'rgba(0, 0, 0, 0.3)'}]">
            <p class="title">{{value.name}}</p>
            <div class="result flex-col">
              <div class="go" @click="goResult(value.id)">
                <span>查看结果</span>
              </div>
              <div class="view">
                <!-- <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-plus-preview"></use>
                </svg>
                <span>预览</span> -->
              </div>
            </div>
            <div class="status four">
              <div class="div">
                <p>已发送</p>
                <span>状态</span>
              </div>
              <div class="div">
                <p>{{value.finishRate}}%</p>
                <span>完成</span>
              </div>
              <div class="div">
                <p>{{value.questionNum}}</p>
                <span>问题</span>
              </div>
              <div class="div">
                <p>{{value.askTime}}S</p>
                <span>平均完成时间</span>
              </div>
            </div>
            <div class="operation">
              <div class="op" @click="share(value.id)"
              :data-clipboard-text="shareLink"
              id="shareLink">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-lianjie"></use>
                </svg>
                <span>点击分享链接</span>
              </div>
              <div class="op" @click="hide(index)">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu1"></use>
                </svg>
                <span>删除</span>
              </div>
            </div>
          </div>
          <div v-else-if="value.status === -1" class="flex-col fix"
          :style="[value.imgUrl && value.imgUrl !== '' ? {backgroundImage: value.url} : {backgroundColor: 'rgba(0, 0, 0, 0.3)'}]">
            <p class="title">{{value.name}}</p>
            <div class="result flex-col">
              <div class="go">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-weibiaoti1"></use>
                </svg>
                <span>编辑调查</span>
              </div>
              <div class="view">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-plus-preview"></use>
                </svg>
                <span>预览</span>
              </div>
            </div>
            <div class="status">
              <div class="div">
                <p>草稿</p>
                <span>状态</span>
              </div>
              <div class="div">
                <p>{{value.name}}</p>
                <span>题目</span>
              </div>
            </div>
            <div class="operation fix">
              <div class="op" @click="hide(index)">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu1"></use>
                </svg>
                <span>删除</span>
              </div>
            </div>
          </div>
        </section>
      </transition-group>
    </v-touch>
    <div v-if="tips" class="tips-home">
      <div class="box" ref="box">
        <div class="message">你想永久删除这个调查吗？删除后无法恢复</div>
        <div class="choose" @click="yes">删除</div>
        <div class="cancel" @click="no">取消</div>
      </div>
    </div>
  </div>
</template>

<script>
import Clipboard from 'clipboard'   // 复制内容进剪切板插件
import {findMyCreateSurvey} from '@/api/survey'
import {check} from '@/api/common'

export default {
  name: 'mySurvey',
  data () {
    return {
      tips: false,
      vuegConfig: {
        disable: false,
        forwardAnim: 'fadeInRight',
        backAnim: 'fadeInLeft'
      },                            // vug动画效果
      cardNow: 0,                   // 当前显示的问卷
      card: [
        {id: 1, type: -1, title: '12345这是一个标题'},
        {id: 2, type: 1, title: '12345这是一个标题'},
        {id: 3, type: -1, title: '12345这是一个标题'}
      ],                            // 所有问卷
      shareLink: '',                 // 分享链接
      myCreateSurveyList: [
        {
          askTime: 0,
          finishRate: 0,
          id: 0,
          imgUrl: '',
          isCard: 0,
          name: '',
          questionNum: 0,
          status: 0
        }
      ]
    }
  },
  computed: {
    cardsLength () {
      return this.myCreateSurveyList.length - 1
    }
  },
  created () {
    this.initial()
  },
  methods: {
    initial () {            //  初始化数据
      let formData = {
        data: {
          uid: localStorage.uid
        },
        token: localStorage.token
      }
      findMyCreateSurvey(JSON.stringify(formData)).then((data) => {
        var result = check(data)
        if (typeof (result) === 'boolean') {
          this.myCreateSurveyList = data.data.data
          console.log(JSON.stringify(this.myCreateSurveyList))
        }
      })
    },
    backMeun () {
      this.$emit('showMeun')
    },                              // 返回主菜单
    goSurvey () {
      this.$emit('goSurvey')
    },                              // 创建调查问卷
    swipeLeft () {
      if (this.cardNow < this.cardsLength) {
        this.cardNow++
        this._transCard()
      }
    },                              // 左滑
    swipeRight () {
      if (this.cardNow > 0) {
        this.cardNow--
        this._transCard()
      }
    },                              // 右滑
    _transCard () {
      let distance = -92.5 * this.cardNow
      document.getElementById('cards').style.transform = `translateX(${distance}vw)`
    },                              // 切换显示问卷
    share (id) {
      this.shareLink = `http://www.giraffehaha.com/home/question/${id}`
      let clip = new Clipboard('#shareLink')
      clip.on('success', (e) => {
        this.$store.dispatch('showTips', {
          show: true,
          message: '已复制'
        })
      })
      clip.on('error', (e) => {
        this.$store.dispatch('showTips', {
          show: true,
          message: '复制失败，请手动复制链接'
        })
      })
    },                                        // 分享(必须调用两次，第一次实例化，第二次才是真正调用)
    goResult (id) {
      this.$router.push({
        name: 'result',
        params: {id}
      })
    },                                        // 查看问卷结果
    hide (index) {
      this.tips = true
      setTimeout(() => {
        this.$refs.box.className = 'box active'
      }, 100)
    },
    cancel () {
      this.$refs.box.className = 'box'
      setTimeout(() => {
        this.tips = false
      }, 300)
    },                                           // 提示内容中的取消选项
    yes () {
      this.cancel()
    },
    no () {
      this.cancel()
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  background-image: linear-gradient(#ffddb4, #3d68be);
  height: 100vh;
  display: flex;
  flex-direction: column;
}
header {
  flex: none;
  width: 100%;
  height: 98px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  h3 {
    font-size: 34px;
    color: #5d331e;
  }
  .icon {
    width: 44px;
    height: 44px;
    padding: 0 30px;
    cursor: pointer;
    color: #937200;
  }
}
.cards {
  width: 100%;
  overflow: hidden;
  padding-bottom: 20px;
  flex: 1;
  display: flex;
  justify-content: flex-start;
}
.card {
  width: 90vw;
  margin-left: 2.5vw;
  border-radius: 10px;
  background-size: cover;
  transition: all 0.5s;
  background-color: rgba(0, 0, 0, 0.24);
}
.flex-col {
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  &.fix {
    border-radius: 10px;
  }
  .title {
    flex: none;
    margin-top: 128px;
    text-align: center;
    font-size: 48px;
    color: #fff;
    line-height: 80px;
  }
  .result {
    flex: 1;
    margin-top: 120px;
    .go {
      width: 500px;
      height: 110px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fce520;
      .icon {
        width: 40px;
        height: 40px;
        color: #937200;
      }
      span {
        color: #5d331e;
        font-size: 40px;
      }
    }
    .view {
      flex: none;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 30px;
      .icon {
        width: 40px;
        height: 40px;
        color: #fff;
        margin: 0 10px;
      }
      span {
        font-size: 24px;
        color: #fff;
      }
    }
  }
  .status {
    height: 200px;
    flex: none;
    width: 650px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .div {
      flex: none;
      border-radius: 10px;
      width: 300px;
      height: 200px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      p {
        font-size: 48px;
        color: #1e4856;
      }
      span {
        font-size: 20px;
        color: #1e4856;
      }
    }
    &.four {
      height: 430px;
    }
  }
  .operation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0.7;
    margin: 20px 0;
    width: 100%;
    .op {
      margin: 0 30px;
    }
    .icon {
      width: 30px;
      height: 30px;
      color: #fff;
      margin: 0 10px;
    }
    span {
      color: #fff;
      font-size: 24px;
    }
    &.fix {
      justify-content: center;
    }
  }
}
.wrapper {
  padding-right: 2.5vw;
  margin-left: 2.5vw;
  flex: none;
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.6s;
}
.list-complete-leave-to {
  opacity: 0;
}
.list-complete-leave-active {
  position: absolute;
  height: 100%;
}
.tips-home {
  position: fixed;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  overflow: hidden;
  .box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    transform: translateY(100%);
    &.active {
      transform: translateY(0);
    }
  }
  .choose,
  .cancel {
    flex: none;
    width: 710px;
    height: 114px;
    background-color: #fff;
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 40px;
  }
  .message {
    font-size: 24px;
    color: #666;
    flex: none;
    width: 710px;
    height: 92px;
    justify-content: center;
    align-items: center;
    display: flex;
    background-color: #fff;
    border-top-left-radius: 26px;
    border-top-right-radius: 26px;
  }
  .choose {
    cursor: pointer;
    border-bottom-left-radius: 26px;
    border-bottom-right-radius: 26px;
    border-top: 1px solid rgba(0, 0, 0, 0.5);
    color: #ff3b30;
    &.blue {
      color: #007aff;
    }
    &.fix {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-top-left-radius: 26px;
      border-top-right-radius: 26px;
    }
  }
  .cancel {
    cursor: pointer;
    border-radius: 26px;
    margin: 20px 0;
    color: #007aff;
  }
}
</style>
